<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>资讯界面</title>
    <link rel="stylesheet" href="./css/zixun.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/daohang.css">
    <script src="./jquery-3.6.0.js"></script>

</head>

<body>
    <!-- 导航栏 -->
    <nav>
        <ul>
            <!-- 左边浮动 -->
            <div class="left">
                <li class="logo">
                    <a href=""> <span>BOSS直聘</span></a>
                </li>
            </div>

            <div class="center">
                <li id="shouye"><a href="./shouye.html"><span>首页</span></a></li>
                <li id="job"><a href="./job.html"><span class="now">职位</span></a></li>
                <li id="campus"><a href="./campus.html"><span>校园</span></a></li>
                <li id="turtle"><a href="./turtle.html"><span>海归</span></a></li>
                <li id="company"><a href="./company.html"><span>公司</span></a></li>
                <li id="app" ><a href="./APP.html"><span>APP</span></a></li>
                <li id="news" id="now"><a href="./zixun.html"><span id="current">资讯</span></a></li>
                <!-- <li id="find"><a href=""><span>发现</span></a></li> -->
                <li id="all-in"><a href="./youle.html"><span>有了</span></a></li>
                <li id="baike"><a href="./baike.html"><span>百科</span></a></li>
         </div>
            <div class="right">
                <!-- 右边浮动 -->
                <li><a href="./submit-resume.html" class="submit-resume" target="_self"><span>上传简历</span></a></li>
                <li><a href="./submit-resume.html" class="find-job"  target="_self"><span>我要找工作</span></a></li>
                <li><a href="./register.html" class="advertise-for"  target="_self"><span>我要招聘</span></a></li>
                <li><a href="./register.html" class="submit"  target="_self"><input type="button" value="注册"></a></li>
                <li><a href="./login.html" class="login"  target="_self"><input type="submit" value="登录"></a></li>
            </div>
        </ul>
    </nav>

    <!-- 导航下面的banner -->
    <div class="banner-all">
        <!-- 放置文字和按钮部分 -->
        <div class="banner">
            <h1>BOSS直聘新闻和数据实时跟踪</h1>
            <!-- 点击媒体合作会出现弹出框和遮罩层 -->
            <div class="btns">
                <a href="javascript:;" class="btn">
                    媒体合作
                </a>
            </div>
        </div>
    </div>
    <!-- 一排三列展示部分 -->
    <div class="inner-content">
        <!--上部分内容  -->
        <div class="list-card">
            <ul class="list-card-ul">
                <li class="list-card-ul-li">
                    <!-- 放置标题 -->
                    <div class="title">
                        <div class="title-left">数据报告</div>
                        <div class="title-more">more</div>
                    </div>
                    <!-- 放置图片以及文字 -->
                    <div class="text">
                        <p class="text-img"><img
                                src="https://img.bosszhipin.com/beijin/article/cover/0f1f7c3886cbbe9fde281ad7498b6f5acfcd208495d565ef66e7dff9f98764da.png"
                                alt=""></p>
                        <p class="text-title">BOSS直聘2021网络安全人才趋势报告</p>
                        <p class="text-view"><a href="">查看详情</a></p>
                    </div>

                </li>
            </ul>
        </div>
        <!--下部分点击会切换的内容  -->
        <div class="list-news">
            <ul class="list-news-ul">
                <!-- 每个li 一排 整体 -->
                <li class="list-news-ul-li">
                    <div class="img">
                        <img src="https://img.bosszhipin.com/beijin/article/cover/0f1f7c3886cbbe9fde281ad7498b6f5acfcd208495d565ef66e7dff9f98764da.png"
                            alt="">
                        <span>数据报告</span>
                    </div>
                    <div class="text">
                        <p class="text-title">BOSS直聘2021网络安全人才趋势报告</p>
                        <p class="summary">
                            进入数字经济时代，互联网、大数据、人工智能、云计算、5G等技术全面渗透到各行各业，改造并影响着生产生活的各个环节。随之而来的网络安全挑战复杂程度之高，演变速度之快，远远超出既往经验。随着网络安全的重要
                        </p>
                        <p class="author">BOSS直聘
                            <em>·</em>
                            <span class="time">2021-05-06</span>
                        </p>
                    </div>
                </li>
            </ul>
            <div class="page">
                <span class="load-more">浏览更多</span>
            </div>
        </div>
    </div>


    
    <div class="footer">
        <div class="footer-inner">
            <div class="inner-top">
                <ul class="one">
                    <li id="first">企业服务</li>
                    <li>职位搜索</li>
                    <li>新闻资讯</li>
                    <li>BOSS直聘APP</li>
                    <li>投资者关系</li>
                </ul>
                <ul class="one">
                    <li id="first">使用与帮助</li>
                    <li>协议与规则</li>
                    <li>个人信息保护政策</li>
                    <li>防骗指南</li>
                    <li>使用帮助</li>
                </ul>
                <ul class="one">
                    <li id="first">练习BOSS直聘</li>
                    <li>北京华品博睿网络技术有限公司</li>
                    <li>公司地址 北京市朝阳区太阳宫中路16号院1号楼18层1801内09</li>
                    <li>违法和不良信息举报邮箱/未成年人举报渠道 jubao@kanzhun.com</li>

                </ul>
                <ul class="one">
                    <li id="first">
                        <img src="https://static.zhipin.com/v2/web/geek/images/footer-logo.png" alt="">
                    </li>
                    <li>企业服务热线和举报投诉/未成年人举报渠道 </li>
                    <li>公司地址 老年人直连热线</li>
                    <li>工作日 8:00 - 22:00</li>
                    <li>休息日 9:30 - 18:30</li>
                </ul>
            </div>
            <div class="inner-bottom">
                <div class="left">
                    <div class="inner-bottom-left">
                        <span>Copyright © 2022 BOSS直聘</span>
                        <span>京ICP备14013441号-5</span>
                        <span>京ICP证150923号</span>
                        <span>京网文[2020]0399-066 号</span>
                        <span> <img src="	https://static.zhipin.com/v2/web/geek/images/icon-badge-1.png" alt="">
                            电子营业执照</span>
                        <span><img src="	https://static.zhipin.com/v2/web/geek/images/icon-beian.png" alt="">
                            京公网安备11010502032801</span>
                    </div>
                    <div class="inner-bottom-right">
                        <span>朝阳警力</span>
                        <span>人力资源服务许可证</span>
                        <span>网上有害信息举报专区</span>
                        <span>朝阳区人社局监督电话</span>
                    </div>
                </div>
                <div class="right">
                    <a href="https://www.weibo.com/bosszhipin" target="_blank" class="weibo">
                        <img src="./img/turtle/微博.svg" alt="">
                    </a>
                    <a href="#" class="weixin">
                        <img src="./img/turtle/微信.svg" alt="">
                    </a>
                    <a href="#" class="app">
                        <img src="./img/turtle/app.svg" alt="">
                    </a>
                    <a href="" class="icon-client-app">
                        <img src="https://img.bosszhipin.com/static/file/2021/dppx09luaq1637052502211.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <p>
            <span>友情链接</span>
            <span>看准网</span>
        </p>
    </div>
    <script>
        /*---------------------渲染数据1列表上部分 ----------------------------*/
        $(window).ready(function () {
            $.ajax({
                type: "get",
                url: "/getZiXun",
                dataType: "json"
            }).done((data) => {
                let str = ''
                let information = data.information.informationList;
                // console.log(information);
                information.forEach((item, value) => {
                    // console.log(item);
                    // console.log(value);
                    str += `  
                    <li class="list-card-ul-li" data-index="${value}">
                        <div class="title">
                            <div class="title-left">${item.title}</div>
                            <div class="title-more" data-index="${value}">more</div>
                        </div>
                        <div class="text">
                            <p class="text-img"><img src="${item.src}" alt=""></p>
                            <p class="text-title">${item.textTitle}</p>
                            <p class="text-view"><a href="">${item.textView}</a></p>
                        </div>
                    </li>       
                    
                    `
                });
                $('.list-card-ul').html(str)
            })
        })

        /*---------------------渲染数据2列表下部分   切换页面部分的数据----------------------------*/
        $(window).ready(function () {
            $.ajax({
                type: "get",
                url: "/getZiXun",
                dataType: "json"
            }).done((data) => {
                $('.page .load-more').hide()
                $('.list-news-ul').empty()
                // console.log($('.list-card .title .title-more').eq(0).attr('data-index'));
                // console.log($('.list-card .title .title-more').eq(1).attr('data-index'));
                // console.log($('.list-card .title .title-more').eq(2).attr('data-index'));

                // 默认渲染第一个数据报告的内容  之后可以点击进行切换

                // 获取more  的自定义属性值  判断 进行渲染
                let str = ''
                data.moreInformation.dataReportList.forEach((item, index) => {
                    str += `
                    <li class="list-news-ul-li"  data-index="${index}">
                            <div class="img">
                                <img src="${item.src}"
                                    alt="">
                                <span>数据报告</span>
                            </div>
                            <div class="text">
                                <p class="text-title">${item.textTitle}</p>
                                <p class="summary">
                                    ${item.summary}
                                </p>
                                <p class="author">${item.author}
                                    <em>·</em>
                                    <span class="time">${item.time}</span>
                                </p>
                            </div>
                        </li>
                    `
                })
                $('.list-news .list-news-ul').html(str)
            })
        })


        // 默认渲染第一个数据报告的内容  之后可以点击进行切换
        // 获取more  的自定义属性值  判断 进行渲染
        $('.list-card-ul').on('click', '.title-more', function () {
            // 获取当前点击事件的自定义属性的 索引值
            console.log($(this).attr('data-index'));

            // 点击后清除ul  里的 li子元素  渲染对应内容上去
            $('.list-news-ul').empty()
            // 获取ajax数据
            $.ajax({
                type: 'get',
                url: '/getZiXun',
                dataType: 'json'
            }).done((data) => {
                let str = '';
                if ($(this).attr('data-index') == 0) {
                    $('.page .load-more').hide()
                    data.moreInformation.dataReportList.forEach((item, index) => {
                    //     str += `
                    //     <li class="list-news-ul-li"  data-index="${index}">
                    //         <div class="img">
                    //             <img src="${item.src}"
                    //                 alt="">
                    //             <span>数据报告</span>
                    //         </div>
                    //         <div class="text">
                    //             <p class="text-title">${item.textTitle}</p>
                    //             <p class="summary">
                    //                 ${item.summary}
                    //             </p>
                    //             <p class="author">${item.author}
                    //                 <em>·</em>
                    //                 <span class="time">${item.time}</span>
                    //             </p>
                    //         </div>
                    //     </li>
                    // `
                    str += htmlStrFunction(item, index)
                    })
                    $('.list-news .list-news-ul').html(str)
                  
                } else if ($(this).attr('data-index') == 1) {
                    $('.page .load-more').show()
                        // 点击浏览更多的时候  超出部分显示出来   浏览更多隐藏
                        console.log($('.page .load-more'));
                    $('.page .load-more').on('click',function () {
                            $('.list-news-ul').css({
                                "overflow": "visible",
                                "height": "auto"
                            })
                            $('.page .load-more').text('没有更多了')
                     })
                    data.moreInformation.articleList.forEach((item, index) => {
                    //     str += `
                    //     <li class="list-news-ul-li"  data-index="${index}">
                    //         <div class="img">
                    //             <img src="${item.src}"
                    //                 alt="">
                    //             <span>干货文章</span>
                    //         </div>
                    //         <div class="text">
                    //             <p class="text-title">${item.textTitle}</p>
                    //             <p class="summary">
                    //                 ${item.summary}
                    //             </p>
                    //             <p class="author">${item.author}
                    //                 <em>·</em>
                    //                 <span class="time">${item.time}</span>
                    //             </p>
                    //         </div>
                    //     </li>
                    // `
                    str += htmlStrFunction(item, index)
                    })
                    $('.list-news .list-news-ul').html(str)
                } else if ($(this).attr('data-index') == 2) {
                    $('.page .load-more').show()
                        // 点击浏览更多的时候  超出部分显示出来   浏览更多隐藏
                        console.log($('.page .load-more'));
                    $('.page .load-more').on('click',function () {
                        console.log($(this));
                            $('.list-news-ul').css({
                                "overflow": "visible",
                                "height": "auto"
                            })
                            $('.page .load-more').text('没有更多了')
                     })
                    data.moreInformation.companyDynamicsList.forEach((item, index) => {
                    str += htmlStrFunction(item, index)
                    //     str += `
                    //     <li class="list-news-ul-li"  data-index="${index}">
                    //         <div class="img">
                    //             <img src="${item.src}"
                    //                 alt="">
                    //             <span>公司动态</span>
                    //         </div>
                    //         <div class="text">
                    //             <p class="text-title">${item.textTitle}</p>
                    //             <p class="summary">
                    //                 ${item.summary}
                    //             </p>
                    //             <p class="author">${item.author}
                    //                 <em>·</em>
                    //                 <span class="time">${item.time}</span>
                    //             </p>
                    //         </div>
                    //     </li>
                    // `
                    })
                    $('.list-news .list-news-ul').html(str)
                }

            })

        })


        /*------------点击浏览更多的时候  超出部分显示出来   浏览更多隐藏------------------------------*/ 
        // $('.page .load-more').click(function () {
        //     console.log($(this));
        //     $('.list-news-ul').css({
        //         "overflow": "visible",
        //         "height": "auto"
        //     })
        //     $('.page .load-more').text('没有更多了')

        // })



        /*-----------------（点击上传简历/我要找工作）/（我要招聘/注册）/登录  弹出一个新的页面------------------------*/ 

        function htmlStrFunction(item, index) {
                        const str = `
                        <li class="list-news-ul-li"  data-index="${index}">
                            <div class="img">
                                <img src="${item.src}"
                                    alt="">
                                <span>干货文章</span>
                            </div>
                            <div class="text">
                                <p class="text-title">${item.textTitle}</p>
                                <p class="summary">
                                    ${item.summary}
                                </p>
                                <p class="author">${item.author}
                                    <em>·</em>
                                    <span class="time">${item.time}</span>
                                </p>
                            </div>
                        </li>
                    `
                    return str
        }
    </script>
</body>

</html>